<template>
  <div class="bg_f2">
    <header class="ub ub-ac nofixed">
      <a class="tel ub ub-pc" href="tel:95373">
        <img src="./nav_tel.png" class="logo" />
      </a>
      <div class="ub-f1">
        <img src="./westair-logo.png" class="logo1" />
      </div>
      <a class="member" @click="link('/home')">
        <img src="./nav_profile.png" class="logo" />
      </a>
    </header>
    <section class="swiper-container">
      <div data-ids='0' class="swiper-wrapper">
        <div class='swiper-slide lunbotu' @click="bannerCK(item)" :key="index" v-for="(item,index) in bannerList"><img :alt="item.newsTitle" :src='item.picturesUrls' /></div>
      </div>
      <div id="swiper-pagination" class="swiper-pagination"></div>
    </section>
    <section class="tools">
      <a @click="link('/flights')">
        <img src="./tools_ticket.png" />
        <span>机票预订</span>
      </a>
      <a @click="link('/xingliyuding')">
        <img src="./tools_cart.png" />
        <span>增值服务</span>
      </a>
      <a href="https://p.westair.cn/tripast/dyoptwo/view/?from=singlemessage&isappinstalled=0">
        <img src="./tools_flightDynamics.png" />
        <span>出行助手</span>
      </a>
      <a class="uhide" @click="link('/airDynamic')">
        <img src="./tools_flightDynamics.png" />
        <span>航班动态</span>
      </a>
      <a @click="link('/recommend')">
        <img src="./tools_sale.png" />
        <span>特价航线</span>
      </a>
      <a href="https://wap.westair.cn/ticket.html">
        <img src="./tools_test.png" />
        <span>机票验真</span>
      </a>
      <a @click="itiner()">
        <img src="./tools_ItineraryPlay.png" />
        <span>行程单打印</span>
      </a>
      <a @click="link('/helpCenter')">
        <img src="./img_bzzx.png" />
        <span>帮助中心</span>
      </a>

      <!--<a href=""><img src="./tools_more.png"/><span>更多服务</span></a>-->
    </section>
    <footer>
      <p class="mt20 mb10 f13 uhide">
        <a href="http://www.westair.cn/portal/#pc">访问西部航空官网电脑版</a>
      </p>
      <p class="zt-primary mb10">
        微信搜索“西部航空”关注我们
      </p>
      <p class="f12 zt-666">
        西部航空有限责任公司版权所有
        <br /> Copyright Westair.cn. All Rights Reserved.
        <br />
        <!--琼ICP备08100707号-->
      </p>

      <div class="tips-download tx-l" v-show="isdown">
        <img src="./tips-close.gif" @click="closedownload" class="close" id="close" />

        <a @click="download" class="btn f14" id="download">点击下载</a>
        <img src="./app-logo.png" class="app-icon" />
        <!-- <h1 class="f16 f-normal" style="font-size:1.2rem;">抢0元机票</h1> -->
        <p class="f16" style="color:white">
          0元机票天天抢，机+酒299元起，尽在飞行加App
        </p>
      </div>
      <div class="pop-mask"></div>
    </footer>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapState } from 'vuex';
import Swiper from '../../../static/swiper/swiper.js';
import $ from '../../../static/dateScroll/jquery-1.9.1.js';
export default {
  data: () => {
    return {
      bannerList: [],
      isdown: true
    }
  },
  created: function () {
    this.getBanner()
    this.$store.commit('changeHeader', { // 提交首页header
      left: '首页',
      right: '',
      middle: '',
      ifshow: false,
      leftAction: '-1',
      leftIcon: 'leftIcon',
      rightAction: '',
      rightIcon: ''
    });
  },
  components: {
  },
  computed: mapState(['loginData', 'helpCenter', 'bannerInfo']),
  methods: {
    itiner: function () {
      if (!this.loginData.isLogin) {
        this.$router.push('/login');
        return false;
      }
      window.location = 'payment/ItineraryPlay.html';
      return true;
    },
    closedownload: function () {
      this.isdown = false
    },
    download: function () {
      // 声明_czc对象:
      let _czc = [];
      // 绑定siteid，请用您的siteid替换下方'XXXXXXXX'部分
      _czc.push(['_setAccount', '1261613440']);
      let UA = navigator.userAgent;
      let isAndroid = /(Android)/i.test(UA)
      let isIos = /(iPhone|iPad|iPod|iOS)/i.test(UA) && !isAndroid // 部分国产机UA会同时包含 android iphone 字符
      let isWeixin = /(MicroMessenger)/i.test(UA)
      console.log(UA)
      let urlIos = 'http://a2074.oadz.com/link/C/2074/28/-KXRTzEU12.Czyr.HD0gvYjn-Ec_/p01b/0/http://app.westair.cn:9006/';
      let urlAndroid = 'http://a2074.oadz.com/link/C/2074/28/-KXRTzEU12.Czyr.HD0gvYjn-Ec_/p01b/0/http://app.westair.cn:9006/';
      if (isIos) {
        if (isWeixin) {
          var domweixin = '<div class="weixin tx-r">' +
            '<img src="image/weixin_tips_plane.png" class="tips-weixin"/>' +
            '<p class="tips-content tx-c">点击右上角<br>选择在浏览器中打开</p>' +
            '</div>'
          $('.pop-mask').append(domweixin);
          $('.pop-mask').show();
          $('.pop-mask').click(function () {
            $('.pop-mask').hide();
            $('.pop-mask .weixin').remove();
          })
        } else {
          window.location.href = urlIos;
          _czc.push(['_trackEvent', 'wap', '下载', 'Ios', 1, 'download']);
        }
      } else if (isAndroid) {
        window.location.href = urlAndroid;
        _czc.push(['_trackEvent', 'wap', '下载', 'Android', 1, 'download']);
      } else {
        var domunknownPlat = '<div class="unknownPlat">' +
          '<p class="tx-c">暂时只提供以下平台的应用</p>' +
          '<a href="' + urlIos + '" class="ios" id="unknownPlat_ios"><img src="image/plat_ios.png"/>IOS下载</a>' +
          '<a href="' + urlAndroid + '" class="android" id="unknownPlat_android"><img src="image/plat_android.png"/>Android下载</a>' +
          '</div>'
        $('.pop-mask').append(domunknownPlat);
        $('.pop-mask').show();
        $('.pop-mask').click(function () {
          $('.pop-mask').hide();
          $('.pop-mask .unknownPlat').remove();
        })
        $('#unknownPlat_ios').click(function () {
          _czc.push(['_trackEvent', 'wap', '下载', 'Ios_unknown', 1, 'unknownPlat_ios']);
        })
        $('#unknownPlat_android').click(function () {
          _czc.push(['_trackEvent', 'wap', '下载', 'android_unknown', 1, 'unknownPlat_android']);
        })
      }
    },
    link: function (url) {
      this.$store.commit('setAirDynamicSel', 0)
      if (url === '/xingliyuding') {
        if (!this.loginData.isLogin) {
          this.$router.push('/login');
        } else {
          let data = {
            pzlxname: '身份证',
            passengerName: '',
            ticketNO: ''
          }
          this.$store.commit('setXingli', data)
          this.$router.push(url)
        }
      } else {
        this.$router.push(url)
      }
    },
    bannerCK: function (item) {
      let content = {
        newsContent: item.content,
        newsTitle: item.newsTitle,
        newsTypeId: item.newsTypeId
      }
      this.$store.commit('setBanner', content);
      this.$router.push('/bannerDetail')
    },
    checkLogin: function () {
      if (!this.loginData.isLogin) {
        // console.log()
        this.$router.push('/login');
        return false;
      }
      return true;
    },
    getBanner: function () {
      let self = this;
      let content = {};
      let data = this.$utils.getUserContent(content);
      // this.$store.commit('showLoading');
      this.$http.post(this.$RS.banner, data).then(
        function (res) {
          // 响应成功回调
          // this.$store.commit('closePop');
          res = res.body;
          console.log(res);
          if (res.code === 1000) {
            let arr = [];
            let i = 0;
            for (i = 0; i < res.content.list.length; i++) {
              if (res.content.list[i].newsTypeId === 4) {
                arr.push(res.content.list[i])
              }
            }
            self.bannerList = arr;
            setTimeout(() => {
              let mySwiper = new Swiper('.swiper-container', {
                pagination: '.swiper-pagination',
                paginationClickable: true,
                spaceBetween: 0,
                centeredSlides: true,
                autoplay: 2500,
                autoplayDisableOnInteraction: false,
                touchMoveStopPropagation: false
              });
              console.log(mySwiper)
            }, 500);
          } else {
            console.log('out');
            // this.$store.commit('closePop');
            this.$store.dispatch('showTx', { text: res.message });
          }
        },
        function (err) {
          // this.$store.commit('closePop');
          // 响应错误回调
          this.$store.dispatch('showTx', { text: err.message || '网络错误，请重试' });
        }
      );
    },
    goOtherUrl: function () {
      window.location.href = 'https://wap.westair.cn/flyplus-newAPI/index.html'
    }
  }
}
</script>

<style lang="stylus">
@import '../../stylus/base.styl';
@import './swiper.css';
@import './common.css';
header.nofixed
  position: relative;
header
  height: f_times(3);
  text-align: center;
  line-height: f_times(3);
  border-bottom: 1px solid #e0e0e0;
  background-color: #fff;
header
  width: 100%;
  height: f_times(3);
  line-height: f_times(3);
  background-color: #fff;
  color: #FFF;
  font-size: f_times(1.2);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
header .tel, header .member
  float: left;
  padding-left: f_times(0.5);
  padding-top: f_times(0.5);
  padding-right: f_times(0.5);
  width: f_times(2.8);
  height: f_times(3);
  background-size: f_times(2);
header .member
  float: right;
.logo
  width: f_times(2);
.logo1
  width: f_times(6);
  margin-top: f_times(0.5);
.swiper-container
  position: relative;
  overflow: hidden;
  height: f_times(11);
.swiper-container img
  width: 100%;
  vertical-align: top;
  height: f_times(11);
.swiper-pagination-bullet
  background: #fff;
  border: 1px solid #666;
.swiper-pagination-bullet-active
  background: #fff;
.tools
  overflow: hidden;
  background-color: #fff;
.tools a
  float: left;
  width: 33.3333%;
  height: f_times(3.5);
  text-align: center;
  padding-top: f_times(1);
.tools a:active
  background-color: #F8F8F8;
.tools img
  width: f_times(1.7) !important;
  vertical-align: middle;
.tools span
  display: block;
  line-height: 2rem;
footer
  text-align: center;
  margin-top: 3rem;
.tips-download
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  bottom: 0;
  z-index: 99999;
  width: 100%;
  color: #fff;
  padding: f_times(0.7);
.tips-download .app-icon
  width: f_times(2.8);
  height: f_times(2.8);
  float: left;
  margin-left: f_times(0.7);
  margin-right: f_times(0.35);
.tips-download .close
  position: absolute;
  left: 0;
  top: 0;
  vertical-align: top;
  width: f_times(1.4);
.tips-download .btn
  float: right;
  background-color: #f7a700;
  color: #fff;
  height: f_times(2.8);
  line-height: f_times(2.8);
  text-align: center;
  padding: 0 f_times(0.7);
  border-radius: f_times(0.35);
  margin-right: f_times(1.5);
.pop-mask
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: none;
  z-index: 99999;
.pop-mask .tips-weixin
  width: f_times(10.5);
.pop-mask .tips-content
  color: #fff;
  font-size: 1.8rem;
.pop-mask .unknownPlat
  background-color: rgba(255, 255, 255, 1);
  position: fixed;
  width: 90%;
  left: 50%;
  top: 50%;
  margin-left: -45%;
  padding: 2rem 0;
  border-radius: 0.4rem;
  transform: translateY(-50%);
.pop-mask .unknownPlat a
  display: block;
  width: 18rem;
  margin: 2rem auto;
  line-height: 4rem;
  border: thin solid #444;
.pop-mask .unknownPlat a img
  width: 1.6rem;
  vertical-align: text-top;
  margin-right: 0.5rem;
.f-normal
  font-style: normal;
  font-weight: 300;
.zanwei
  width: 100% !important;
  background-color: #ddd;
.img-wh1ks
  width: 4rem !important;
  height: auto !important;
.zt-primary
  color: #7A3D99;
.mb10
  margin-bottom: f_times(1);
.mt20
  margin-top: f_times(1.4);
.f13
  font-size: f_times(0.9);
.zt-666
  color: #666;
  line-height: f_times(1.4);
.f12
  font-size: f_times(0.9);
.f16
  font-size: f_times(1);
</style>